<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>聊天界面</title>
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="css/fontawesome/css/all.min.css" rel="stylesheet">
</head>
<link href="css/chat.css" rel="stylesheet">
<link href="css/tooltip/css/tooltip.css" rel="stylesheet">
<link href="css/tooltip/css/tooltip1.css" rel="stylesheet">
<body>
<div style="width: 200px;
    padding-top: 40px;
    float:left;
    display: inline-block;
    height: 100%;
    position: fixed;
    border-right: 1px solid #f1f2f4;" id="friends">
  <div style="height: 100%;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background-color: #fff;
    max-height: calc(100% - 60px);">
    <div>
      <a style="background-color: #eef9fe;
                            color: #06a7ff;cursor: pointer;
                            height: 40px;
                            line-height: 40px;
                            display: inline-block;
                            width: 177px;
                            border-radius: 10px;
                            padding-left: 24px;
                            padding-right: 18px;
                            margin-left: 12px;
                            font-weight: 700;">
        <i style=" background-color: #eef9fe;
                                color: #06a7ff;" class="fa fa-chevron-down " :class="{'fa-chevron-right':friendslist}" aria-hidden="true" @click="friendslist==true?friendslist=false:friendslist=true"></i>
        <span style="display: inline-block;vertical-align: middle;margin-left: 15px;">我的好友</span>
      </a>
    </div>
    <div id="friendlist" v-show="friendslist==false">
      <div class="friend_list" v-for="friend in friends" @click="changeFont($event)">
                    <span>
                        <a class="wp-aside-nav">
                            <div class="wp-aside-nav__sub-item-body">
                                <img src="images/profile.png" class="character-img">
                                <p class="wp-aside-nav__sub-item-text" v-text="friend.friendName"></p>
                                <span class="badge badge-warning badge-pill"></span>
                            </div>
                        </a>
                    </span>
      </div>
    </div>
    <div>
      <a style="background-color: #eef9fe;
                            color: #06a7ff;cursor: pointer;
                            height: 40px;
                            line-height: 40px;
                            display: inline-block;
                            width: 177px;
                            border-radius: 10px;
                            padding-left: 24px;
                            padding-right: 18px;
                            margin-left: 12px;
                            font-weight: 700;">
        <i style=" background-color: #eef9fe;
                                color: #06a7ff;" class="fa fa-chevron-down" :class="{'fa-chevron-right':search==false}" aria-hidden="true" @click="search==false?search=true:search=false"></i>
        <span style="display: inline-block;vertical-align: middle;margin-left: 15px;">添加好友</span>
      </a>
    </div>
    <div  v-show="search" style="position: relative;width: 100%;height: 100px">
      <div id="search">
        <div id="search_input">
          <input v-model="searchf" type="text" placeholder="好友昵称、账号" >
          <button>
            <i class="sprite" @click="searchFriends"></i>
          </button>
        </div>
        <div class="friend_list" v-if="JSON.stringify(addf) != '{}'">
                <span>
                    <a class="wp-aside-nav">
                        <div v-show="sc" class="wp-aside-nav__sub-item-body" style="position: relative">
                            <i style="position: absolute;left:18px;top:15px" class="fa fa-plus" aria-hidden="true" @click="addFriend"></i>
                            <img src="images/profile.png" class="character-img">
                            <p class="wp-aside-nav__sub-item-text" v-text="addf.username"></p>
                        </div>
                    </a>
                </span>
        </div>
        <h4 v-else style="text-align: center;margin-top:30px;font-size: 12px">未找到好友！</h4>
      </div>
    </div>


  </div>
</div>
<div style="margin-left: 20%;
                margin-top: 3%;
                border-color: #4486e9;

                display: inline-flex;;
                position:relative;
                width: 800px;">
  <div style="background: #fff;
                    border-color: #000000;
                    border: solid 1px #e8e8e8;
                    box-shadow: 0 0 10px #4486e9;
                    width: 100%;
                    position: relative;">
    <div style="height: 430px;" class="content-chat-main">
      <ul id="content_main">
        <div v-for="c in chatHistory">
          <div v-if="c!== undefined && c!== null">
            <li >
              <div class="system">
                <span class="system-bg left"></span>
                <span v-text="c.createTime"></span>
                <span class="system-bg right"></span>
              </div>
            </li>
            <li v-if="c.userId==c.localid">
              <div class="content-chat-mine">
                <img src="images/profile.png">
              </div>
              <div style="font-size: 18px" class="content-chat-text" v-html="c.chat"></div>
            </li>
            <li v-if="c.userId!=c.localid">
              <div class="content-chat-you">
                <img src="images/profile.png">
              </div>
              <div class="content-chat-text-y">
                <span style="font-size: 18px" v-html="c.chat"></span>
              </div>
            </li>
          </div>

        </div>
      </ul>
      <div id="into-view"></div>

    </div>
    <ul id="tools-panel">
      <li>

        <i class="fa fa-file tooltip1" aria-hidden="true">
          <input class="send_file" type="file">
          <div class="tooltiptext">发送文件</div>
        </i>
      </li>
      <li>
        <i style="font-size: 20px" class="fas fa-smile-beam tooltip" aria-hidden="true">
          <div class="emot-panel face-list" unselectable="on" onmousedown="return false;" style="display: block;">
            <div class="tools-face-content">
              <ul class="tools-face-list">
                <li title="[最右]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c8/lxhzuiyou_thumb.gif"></li><li class="list_emoji" id="emoji_[泪流满面]" title="[泪流满面]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/64/lxhtongku_thumb.gif"></li>
                <li title="[江南style]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/67/gangnamstyle_thumb.gif"></li><li class="list_emoji" id="emoji_[偷乐]"title="[偷乐]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fa/lxhtouxiao_thumb.gif"></li><li class="list_emoji" id="emoji_[加油啊]" onclick="click_emojiItems(id);" title="[加油啊]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/03/lxhjiayou_thumb.gif"></li><li class="list_emoji" id="emoji_[doge]" onclick="click_emojiItems(id);" title="[doge]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/doge_thumb.gif"></li><li class="list_emoji" id="emoji_[喵喵]" onclick="click_emojiItems(id);" title="[喵喵]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/4a/mm_thumb.gif"></li><li class="list_emoji" id="emoji_[笑cry]" onclick="click_emojiItems(id);" title="[笑cry]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/34/xiaoku_thumb.gif"></li><li class="list_emoji" id="emoji_[xkl转圈]" onclick="click_emojiItems(id);" title="[xkl转圈]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/xklzhuanquan_thumb.gif"></li><li class="list_emoji" id="emoji_[微笑]" onclick="click_emojiItems(id);" title="[微笑]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif"></li><li class="list_emoji" id="emoji_[嘻嘻]" onclick="click_emojiItems(id);" title="[嘻嘻]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif"></li><li class="list_emoji" id="emoji_[哈哈]" onclick="click_emojiItems(id);" title="[哈哈]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif"></li><li class="list_emoji" id="emoji_[可爱]" onclick="click_emojiItems(id);" title="[可爱]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_thumb.gif"></li><li class="list_emoji" id="emoji_[可怜]" onclick="click_emojiItems(id);" title="[可怜]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_thumb.gif"></li><li class="list_emoji" id="emoji_[挖鼻]" onclick="click_emojiItems(id);" title="[挖鼻]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_thumb.gif"></li><li class="list_emoji" id="emoji_[吃惊]" onclick="click_emojiItems(id);" title="[吃惊]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_thumb.gif"></li><li class="list_emoji" id="emoji_[害羞]" onclick="click_emojiItems(id);" title="[害羞]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_thumb.gif"></li><li class="list_emoji" id="emoji_[挤眼]" onclick="click_emojiItems(id);" title="[挤眼]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_thumb.gif"></li><li class="list_emoji" id="emoji_[闭嘴]" onclick="click_emojiItems(id);" title="[闭嘴]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_thumb.gif"></li><li class="list_emoji" id="emoji_[鄙视]" onclick="click_emojiItems(id);" title="[鄙视]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_thumb.gif"></li><li class="list_emoji" id="emoji_[爱你]" onclick="click_emojiItems(id);" title="[爱你]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_thumb.gif"></li><li class="list_emoji" id="emoji_[泪]" onclick="click_emojiItems(id);" title="[泪]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_thumb.gif"></li><li class="list_emoji" id="emoji_[偷笑]" onclick="click_emojiItems(id);" title="[偷笑]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_thumb.gif"></li><li class="list_emoji" id="emoji_[亲亲]" onclick="click_emojiItems(id);" title="[亲亲]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_thumb.gif"></li><li class="list_emoji" id="emoji_[生病]" onclick="click_emojiItems(id);" title="[生病]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_thumb.gif"></li><li class="list_emoji" id="emoji_[太开心]" onclick="click_emojiItems(id);" title="[太开心]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_thumb.gif"></li><li class="list_emoji" id="emoji_[白眼]" onclick="click_emojiItems(id);" title="[白眼]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_thumb.gif"></li><li class="list_emoji" id="emoji_[右哼哼]" onclick="click_emojiItems(id);" title="[右哼哼]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_thumb.gif"></li><li class="list_emoji" id="emoji_[左哼哼]" onclick="click_emojiItems(id);" title="[左哼哼]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_thumb.gif"></li><li class="list_emoji" id="emoji_[嘘]" onclick="click_emojiItems(id);" title="[嘘]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_thumb.gif"></li><li class="list_emoji" id="emoji_[衰]" onclick="click_emojiItems(id);" title="[衰]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif"></li><li class="list_emoji" id="emoji_[委屈]" onclick="click_emojiItems(id);" title="[委屈]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/73/wq_thumb.gif"></li><li class="list_emoji" id="emoji_[吐]" onclick="click_emojiItems(id);" title="[吐]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9e/t_thumb.gif"></li><li class="list_emoji" id="emoji_[哈欠]" onclick="click_emojiItems(id);" title="[哈欠]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/cc/haqianv2_thumb.gif"></li><li class="list_emoji" id="emoji_[抱抱]" onclick="click_emojiItems(id);" title="[抱抱]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/27/bba_thumb.gif"></li><li class="list_emoji" id="emoji_[怒]" onclick="click_emojiItems(id);" title="[怒]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7c/angrya_thumb.gif"></li><li class="list_emoji" id="emoji_[疑问]" onclick="click_emojiItems(id);" title="[疑问]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/yw_thumb.gif"></li><li class="list_emoji" id="emoji_[馋嘴]" onclick="click_emojiItems(id);" title="[馋嘴]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a5/cza_thumb.gif"></li><li class="list_emoji" id="emoji_[拜拜]" onclick="click_emojiItems(id);" title="[拜拜]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/70/88_thumb.gif"></li><li class="list_emoji" id="emoji_[思考]" onclick="click_emojiItems(id);" title="[思考]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e9/sk_thumb.gif"></li><li class="list_emoji" id="emoji_[汗]" onclick="click_emojiItems(id);" title="[汗]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/24/sweata_thumb.gif"></li><li class="list_emoji" id="emoji_[困]" onclick="click_emojiItems(id);" title="[困]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/kunv2_thumb.gif"></li><li class="list_emoji" id="emoji_[睡]" onclick="click_emojiItems(id);" title="[睡]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/96/huangliansj_thumb.gif"></li><li class="list_emoji" id="emoji_[钱]" onclick="click_emojiItems(id);" title="[钱]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/90/money_thumb.gif"></li><li class="list_emoji" id="emoji_[失望]" onclick="click_emojiItems(id);" title="[失望]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0c/sw_thumb.gif"></li><li class="list_emoji" id="emoji_[酷]" onclick="click_emojiItems(id);" title="[酷]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/cool_thumb.gif"></li><li class="list_emoji" id="emoji_[色]" onclick="click_emojiItems(id);" title="[色]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/20/huanglianse_thumb.gif"></li><li class="list_emoji" id="emoji_[哼]" onclick="click_emojiItems(id);" title="[哼]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/49/hatea_thumb.gif"></li><li class="list_emoji" id="emoji_[鼓掌]" onclick="click_emojiItems(id);" title="[鼓掌]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/36/gza_thumb.gif"></li><li class="list_emoji" id="emoji_[晕]" onclick="click_emojiItems(id);" title="[晕]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/dizzya_thumb.gif"></li><li class="list_emoji" id="emoji_[悲伤]" onclick="click_emojiItems(id);" title="[悲伤]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1a/bs_thumb.gif"></li><li class="list_emoji" id="emoji_[抓狂]" onclick="click_emojiItems(id);" title="[抓狂]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/62/crazya_thumb.gif"></li><li class="list_emoji" id="emoji_[黑线]" onclick="click_emojiItems(id);" title="[黑线]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/91/h_thumb.gif"></li><li class="list_emoji" id="emoji_[阴险]" onclick="click_emojiItems(id);" title="[阴险]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/yx_thumb.gif"></li><li class="list_emoji" id="emoji_[怒骂]" onclick="click_emojiItems(id);" title="[怒骂]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/numav2_thumb.gif"></li><li class="list_emoji" id="emoji_[互粉]" onclick="click_emojiItems(id);" title="[互粉]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/89/hufen_thumb.gif"></li><li class="list_emoji" id="emoji_[心]" onclick="click_emojiItems(id);" title="[心]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/hearta_thumb.gif"></li><li class="list_emoji" id="emoji_[伤心]" onclick="click_emojiItems(id);" title="[伤心]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ea/unheart.gif"></li><li class="list_emoji" id="emoji_[猪头]" onclick="click_emojiItems(id);" title="[猪头]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/pig.gif"></li><li class="list_emoji" id="emoji_[熊猫]" onclick="click_emojiItems(id);" title="[熊猫]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/panda_thumb.gif"></li><li class="list_emoji" id="emoji_[兔子]" onclick="click_emojiItems(id);" title="[兔子]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/81/rabbit_thumb.gif"></li><li class="list_emoji" id="emoji_[ok]" onclick="click_emojiItems(id);" title="[ok]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d6/ok_thumb.gif"></li><li class="list_emoji" id="emoji_[耶]" onclick="click_emojiItems(id);" title="[耶]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/ye_thumb.gif"></li><li class="list_emoji" id="emoji_[good]" onclick="click_emojiItems(id);" title="[good]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d8/good_thumb.gif"></li><li class="list_emoji" id="emoji_[no]" onclick="click_emojiItems(id);" title="[no]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ae/buyao_org.gif"></li><li class="list_emoji" id="emoji_[赞]" onclick="click_emojiItems(id);" title="[赞]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d0/z2_thumb.gif"></li><li class="list_emoji" id="emoji_[来]" onclick="click_emojiItems(id);" title="[来]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/come_thumb.gif"></li><li class="list_emoji" id="emoji_[弱]" onclick="click_emojiItems(id);" title="[弱]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d8/sad_thumb.gif"></li><li class="list_emoji" id="emoji_[草泥马]" onclick="click_emojiItems(id);" title="[草泥马]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7a/shenshou_thumb.gif"></li><li class="list_emoji" id="emoji_[神马]" onclick="click_emojiItems(id);" title="[神马]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/horse2_thumb.gif"></li><li class="list_emoji" id="emoji_[囧]" onclick="click_emojiItems(id);" title="[囧]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/15/j_thumb.gif"></li><li class="list_emoji" id="emoji_[浮云]" onclick="click_emojiItems(id);" title="[浮云]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/bc/fuyun_thumb.gif"></li><li class="list_emoji" id="emoji_[给力]" onclick="click_emojiItems(id);" title="[给力]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/geiliv2_thumb.gif"></li><li class="list_emoji" id="emoji_[围观]" onclick="click_emojiItems(id);" title="[围观]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f2/wg_thumb.gif"></li><li class="list_emoji" id="emoji_[威武]" onclick="click_emojiItems(id);" title="[威武]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/70/vw_thumb.gif"></li><li class="list_emoji" id="emoji_[奥特曼]" onclick="click_emojiItems(id);" title="[奥特曼]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/bc/otm_thumb.gif"></li><li class="list_emoji" id="emoji_[礼物]" onclick="click_emojiItems(id);" title="[礼物]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c4/liwu_thumb.gif"></li><li class="list_emoji" id="emoji_[钟]" onclick="click_emojiItems(id);" title="[钟]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d3/clock_thumb.gif"></li><li class="list_emoji" id="emoji_[话筒]" onclick="click_emojiItems(id);" title="[话筒]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9f/huatongv2_thumb.gif"></li><li class="list_emoji" id="emoji_[蜡烛]" onclick="click_emojiItems(id);" title="[蜡烛]"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/lazhuv2_thumb.gif"></li>
              </ul>
            </div>
          </div>
        </i>
      </li>

    </ul>
    <form method="post" id="sendChat" @submit.prevent="saveChatHistory">
      <div id="send_pannel" class="send_pannel">
        <div  id="send_text"  class="send_text" contenteditable="true"  placeholder="请在此输入文本内容..."></div>
        <input id="sendBtn" type="submit" value="发送">
      </div>
    </form>
  </div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/chat.js"></script>
</body>
</html>